<template>
	<view class="content">
		<u-navbar
			title="消息" 
			:bg-color="`${mainColor}`" 
			fixed 
			placeholder 
			autoBack
			:height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"
			/>
		<view class="tab-box flex-ar" :style="{top: `${navHeight}px`}">
			<view class="tab-item" v-for="(item, index) in tabs" :key="index"
				@click="selection = item">
				<view :class="{'active': selection.id == item.id}">
					{{item.name}}
					<view class="line"></view>
				</view>
			</view>
		</view>
		<view class="list" :style="{height: `calc(100vh - 42px - ${navHeight}px)`, marginTop: '41px'}" style="margin-top:41px;" v-if="messages">
			<view class="empty-box" v-if="messages.length == 0">
				<u-empty mode="message" text="没有消息"></u-empty>
			</view>
			<u-list v-else @scrolltolower="loadMore" :height="`calc(100vh - 42px - ${navHeight}px)`">
				<view style="height: 20px;"></view>
			  <u-list-item v-for="(item, index) in messages" :key="index">
				<view class="item flex-a">
					<u-icon name="bell-fill" size="28" color="#fff" :custom-style="{
						width: '28px',
						height: '28px',
						background: `${mainColor}`,
						borderRadius: '50%',
						padding: '10px'
					}"></u-icon>
					<view class="item-content">
						<view class="title">{{item.title}}</view>
						<rich-text :nodes="item.content" v-if="item.content" class="text"></rich-text>
						<view class="bottom flex-b">
							<view class="date">{{item.create_at}}</view>
							<view class="link" v-if="item.link_type" @click="clickItem(item)">详情</view>
						</view>
					</view>
				</view>
			  </u-list-item>
			  <u-loadmore :status="status" icon line/>
			  <view style="height: 10px;"></view>
			</u-list>
		</view>
	</view>
</template>

<script>
	import { systemInfo } from '@/utils/mixin';
	import { getMessages, getNotice } from '@/api';
	import token from '@/utils/token';

	export default {
		mixins: [systemInfo],
		data() {
			return {
				selection: {},
				tabs: [
					{
						id: 1,
						name: '用户消息',
						type: 'user'
					},
					{
						id: 2,
						name: '系统消息',
						type: 'system'
					}
				],
				messages: [],
				page: 1,
				hasMore: false,
				status: 'loadmore'
			}
		},
		onLoad() {
			this.selection = this.tabs[0];
			this.getSystemInfo();
			this.loadMessages();
		},
		onPullDownRefresh() {
			this.loadMessages();
		},
		methods: {
			async loadMessages() {
				if (this.$store.state.onlineAudit || !token.exists()) {
					uni.stopPullDownRefresh();
					return;
				}
				
				this.page = 1;
				const res = await getMessages(this.selection.type, this.page);
				this.messages = res.data;
				this.hasMore = res.is_next;
				this.status = res.is_next ? 'loadmore' : 'nomore';
				uni.stopPullDownRefresh();
			},
			async loadMore() {
				if (this.status != 'loading' && this.hasMore) {
					this.page += 1;
					this.status = 'loading';
					const res = await getMessages(this.selection.status, this.page);
					this.messages = this.messages.concat(res.data);
					this.hasMore = res.is_next;
					this.status = res.is_next ? 'loadmore' : 'nomore';
				}
			},
			clickItem(item) {
				if (item.link_type == 'view_agreement') {
					uni.navigateTo({
						url:`/pages/agreement/index?type=${item.data.type}&title=${item.data.name}`
					})
				}
			}
		},
		watch: {
			selection: async function(value, oldValue) {
				if (value != oldValue && oldValue.id) {
					this.loadMessages();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.tab-box {
    padding-top: 10px;
    height: 31px;
    background-color: #fff;
    color: #999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
	
	.tab-item {
		width: 25%;
		display: flex;
		justify-content: center;
	}
	
	.active {
	    position: relative;
	    font-weight: 500;
	    color: $main-color;
		height: 100%;
		
		.line {
		    position: absolute;
		    width: 100%;
		    height: 3px;
		    bottom: 0px;
		    left: 0;
		    background-color: $main-color;
		}
	}
}

.list {	
	.empty-box {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.item {
		margin: 0 10px 10px;
		border-radius: 6px;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
		padding: 10px;
		
		.item-content {
			margin-left: 10px;
			
			.title {
				font-weight: bold;
				font-size: 14px;
				margin-bottom: 4px;
			}
			
			.text {
				font-size: 14px;
				text-align: justify;
			}
			
			.bottom {
				font-size: 12px;
				padding-top: 8px;
				
				.date {
					color: #666;
				}
				
				.link {
					color: $hint-color;
				}
			}
		}
	}
}
</style>

